<template>
    <div>
        <div ref="bannerWith" class="banner_box" @touchend="addtouchend" @touchstart="addtouchstart">
            <ul :class="isTransition ? 'animate' : ''" @transitionend="addTransitionEnd" :style="`transform:translateX(-${moveX}px)`">
                <li @touchstart="getBookId(banners[banners.length - 1].id, banners[banners.length - 1].title)">
                    <img :src="banners[banners.length - 1]?.cover" alt="" />
                </li>
                <li v-for="item in banners" :key="item.id" @touchstart="getBookId(item.id, item.title)">
                    <img :src="item?.cover" alt="" />
                </li>
                <li @touchstart="getBookId(banners[0].id, banners[0].title)">
                    <img :src="banners[0]?.cover" alt="" />
                </li>
            </ul>

            <ol>
                <li :class="key == index ? 'active' : ''" v-for="(item, index) in banners" :key="index" @click="setPoint(index)"></li>
                <!-- <li :class="index == 2 ? 'active' : ''"></li> -->
                <!-- <li :class="index == 3 ? 'active' : ''"></li> -->
                <!-- <li :class="index == 4 ? 'active' : ''"></li> -->
            </ol>
        </div>
    </div>
</template>

<script>
export default {
    props: ["banners"],
    data() {
        return {
            imglist: [
                {
                    src: require("@/assets/th.jpg"),
                    id: 1,
                },
                {
                    src: require("@/assets/th2.jpg"),
                    id: 2,
                },
                {
                    src: require("@/assets/th.jpg"),
                    id: 3,
                },
                {
                    src: require("@/assets/th2.jpg"),
                    id: 4,
                },
            ],
            width: 0,
            key: 0,
            bannerIndex: 1,
            isShow: true,
            timer: null,
            isTransition: true,
            moveX: 0,
            timeStart: 0,
            timeEnd: 0,
            bookId: "",
            bookTitle: "",
        };
    },
    methods: {
        getBookId(id, title) {
            this.bookId = id;
            this.bookTitle = title;
        },
        banner() {
            this.addTransitionEnd();

            this.$nextTick(() => {
                if (this.$refs["bannerWith"]) {
                    let dom = this.$refs["bannerWith"];
                    let v1 = getComputedStyle(dom)["width"];
                    this.width = parseFloat(v1);
                }
            });

            this.timer = setInterval(() => {
                this.autoPlay();
            }, 1000);
        },
        autoPlay() {
            this.isTransition = true;
            this.bannerIndex++;
            this.moveX = this.bannerIndex * this.width;
            this.key++;
            if (this.key > this.banners.length - 1) {
                this.key = 0;
            }
        },
        addTransitionEnd() {
            if (this.bannerIndex > this.banners.length - 1) {
                this.bannerIndex = 0;
                this.isTransition = false;
                this.moveX = 0;
            }
        },
        setPoint(num) {
            this.bannerIndex = num;
            this.moveX = this.bannerIndex * this.width;
            this.key = num;
        },

        addtouchstart() {
            clearInterval(this.timer);
            this.timeStart = Date.now();
            // console.log(this.timeStart);
        },
        addtouchend() {
            this.timeEnd = Date.now();
            // console.log(this.timeEnd);
            // console.log(this.timeEnd - this.timeStart);
            let time = this.timeEnd - this.timeStart;
            if (time < 70) {
                // console.log(this.bookId);
                // console.log(this.bookTitle);
                this.$router.push({
                    path: "/detail",
                    query: {
                        id: this.bookId,
                        title: this.bookTitle,
                    },
                });
            } else {
                clearInterval(this.timer);
                this.autoPlay();
                // 执行定时器函数
                this.timer = setInterval(() => {
                    this.autoPlay();
                }, 1000);
            }
        },
    },
    mounted() {
        this.banner();
    },
};
</script>

<style lang="scss" scoped>
.banner_box {
    position: relative;
    // border: 1px solid #000;
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 3px;

    .animate {
        transition: transform 0.5s linear;
    }
    ul {
        display: flex;
        width: 1000%;
        height: 100%;
        transform: translateX(0);
        li {
            width: 10%;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    ol {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        // width: 50px;
        height: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        li {
            margin: 0 5px;
            background-color: #f5f5f5;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            transition: background-color 0.5s linear;
            &.active {
                background-color: yellowgreen;
            }
        }
    }
}
</style>
